<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view :style="{ backgroundColor: bgColor, minHeight: 'calc(100vh - 55px)' }" class="page-img">
    <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
      <ns-navbar :background="bgNav" :title-color="textNavColor" :globalS="diyData.global"
        :scrollTop="scrollTop"></ns-navbar>
    </view>


    <diy-index-page ref="indexPage" :value="topIndexValue" :scrollHeight="scrollHeight" :scrollTopHeight="scrollTopHeight"
      :bgUrl="bgUrl" v-if="topIndexValue">
      <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :storeId="storeId" :height="scrollTopHeight"
        :token="storeToken"></diy-group>
      <!-- <view class="padding-bottom">
				<ns-copyright></ns-copyright>
			</view> -->
    </diy-index-page>

    <scroll-view v-else scroll-y="true" show-scrollbar="false"
      :style="{ height: 'calc(100vh - ' + headerHeight + ' - 55px)' }" @scroll="scroll">
      <view class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
        <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :storeId="storeId"
          :token="storeToken"></diy-group>
        <!-- <view class="account-box">
					<view class="account-left">
						<view>
							<u-image src="https://transtorecc.oss-cn-beijing.aliyuncs.com/transtorecc/2024-1-309.jpg" width="140rpx" height="140rpx" border-radius="10" mode=""></u-image>
						</view>
						<view class="u-m-l-20 account-left-text">
							<view class="u-color-gary">关注公众号领取关注礼</view>
							<view class="u-font-40 u-font-bold">鹏城快享</view>
						</view>
					</view>
					<view class="account-right" @click="handleFollow">
						关注
					</view>
				</view> -->
        <!-- <view class="padding-bottom">
					<ns-copyright></ns-copyright>
				</view> -->
        <ns-goods-recommend ref="goodrecommend" route="goodsdetail"></ns-goods-recommend>
      </view>
    </scroll-view>

    <view class="u-text-center u-m-30" style="color: #999;">技术支持：橙美科技</view>

    <!-- <template
			v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="image-wrap">
						<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
							@click="$util.diyRedirectTo(diyData.global.popWindow.link)" mode="aspectFit"></image>
					</view>
					<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
				</uni-popup>
			</view>
		</template> -->

    <!-- 底部tabBar -->
    <view class="page-bottom" v-if="openBottomNav"><diy-bottom-nav @callback="callback"></diy-bottom-nav></view>

    <!-- 收藏 -->
    <uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
      <view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
        <image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"></image>
        <text @click="closeCollectPopupWindow">我知道了</text>
      </view>
    </uni-popup>

    <ns-login ref="login"></ns-login>
    <loading-cover ref="loadingCover"></loading-cover>

    <!-- <diy-info-modal ref="diyInfo"  :token="storeToken"></diy-info-modal>  -->
  </view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
import goodsDetailBase from '@/common/js/goods_detail_base.js';
import diyJs from '@/common/js/diy.js';
import index from './public/js/index.js';
export default {
  components: {
    uniPopup,
    nsNavbar
  },
  mixins: [diyJs, index], 
  // data() {
	// 	return {
	// 	};
	// },
  async onLoad(data) {
    
  },
  onShow() {
    this.$api.sendRequest({
      url: "/api/member/judgeBuy",
      success: res => {
        if (!res.data) {
          uni.hideShareMenu()
        }
      }
    });	
  },
  methods: {
    handleFollow() {
      uni.navigateTo({
        url: "/pages/goods/webView?url=" + encodeURIComponent(JSON.stringify('https://mp.weixin.qq.com/s/UvEEBpHiZRL7T9rPDTfNWw'))
      })
    }
  },
  onShareTimeline() {
    return {
      title: '鹏城快享',
      query: `source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ""
    }
  },
  onShareAppMessage() {
    return {
      title: "鹏城快享",
      path: `/pages/index/index?source_member=${uni.getStorageSync("user_id")}`,
      imageUrl: ''
    }
  },
};
</script>

<style lang="scss">
@import '@/common/css/diy.scss';

.account-box {
  margin: 30rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 20rpx;

  .account-left {
    display: flex;

    .account-left-text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx 0 30rpx 0;
    }
  }

  .account-right {
    border: 1rpx solid #FE5E0A;
    padding: 15rpx 25rpx;
    border-radius: 50rpx;
    color: #FE5E0A;
  }
}


/* 分割 */

.end_b {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  height: 180rpx;
  background-color: #fff;
  padding: 30rpx 20rpx;

  .complete_btn {
    width: 100%;
    background: #3070F6;
    color: #fff;
    border-radius: 40rpx;
    width: 100%;
    height: 70rpx;
    font-size: 28rpx;
    line-height: 70rpx;
  }
}
.info-head {
	.head-nav {
		width: 100%;
		height: var(--status-bar-height);
		background: #ffffff;
	}

	.head-nav.active {
		padding-top: 40rpx;
	}
}

.captcha {
	width: 170rpx;
	height: 50rpx;
}

.info-list-cell {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 30rpx;
	position: relative;
	line-height: 50rpx;
	background-color: #fff;

	&:first-child {
		padding: 28rpx 30rpx;
	}
	
	.cell-tit {
		white-space: nowrap;
	}

	.cell-tip1 {
		margin-right: 40rpx;
	}

	&.log-out-btn {
		margin-top: 40rpx;

		.cell-tit {
			margin: auto;
		}
	}

	.info-list-head {
		border: 1rpx solid $color-line;
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
	}

	.info-list-head image {
		max-width: 100%;
		max-height: 100%;
	}

	// #ifdef MP
	&.info-item {
		margin-top: 16rpx;
	}
	// #endif

	&.info-list-con ~ &.info-list-con:after {
		content: '';
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		top: 0;
		border-bottom: 1rpx solid $color-line;
	}

	.cell-tip {
		margin-left: auto;
		color: $color-tip;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 470rpx;
	}

	.cell-more {
		margin-left: 10rpx;
		width: 32rpx;
		height: 100%;
	}

	.cell-more:after {
		content: '';
		display: block;
		width: 12rpx;
		height: 12rpx;
		border: 2rpx solid darken($color-line, 20%) {
			right-color: transparent;
			bottom-color: transparent;
		}

		transform: rotate(135deg);
	}
}

.edit-info-box {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 40rpx;
	min-height: 50rpx;
	background-color: #fff;

	.info-name {
		width: 150rpx;
		font-size: $font-size-base;
		text-align: left;
	}

	.info-content {
		width: 0;
		font-size: $font-size-base;
		padding: 0;
		flex: 1; 
	}

	.dynacode {
		margin: 0;
		padding: 0 10rpx;
		width: 250rpx;
		height: 60rpx;
		font-size: $font-size-base;
		line-height: 60rpx;
		color: #fff;
		word-break: break-all;
	}
	.edit-sex-list {
		display: flex;
		label {
			display: flex;
			margin-left: 30rpx;
			align-items: center;
		}
	}
	uni-radio .uni-radio-input {
		width: 32rpx;
		height: 32rpx;
	}
}

.set-pass-tips {
	padding: 20rpx 20rpx 0 20rpx;
}

.input-len {
	width: 500rpx !important;
}

.save-item {
	margin-top: 50rpx;

	button {
		font-size: 30rpx;
	}
}

.empty {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $padding;
	box-sizing: border-box;
	justify-content: center;
	padding-top: 80rpx;
	.empty_img {
		width: 63%;
		height: 450rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.iconfont {
		font-size: 190rpx;
		color: $color-tip;
		line-height: 1.2;
	}

	button {
		min-width: 300rpx;
		margin-top: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: $font-size-base;
	}
}
</style>

<style scoped >
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
  background: none !important;
}

/deep/ .placeholder {
  height: 0;
}

/deep/::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
  display: none;
}

/deep/ .ns-copyright-info {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.image-wrap {
  line-height: normal;
}

.image-wrap image {
  border-radius: 20rpx;
}

</style>